<template>
  <div>
    <!-- 左侧菜单 -->
    <div class="detail_box" style="min-height: auto;min-width:auto">
      <!-- 操作 -->
      <div class="operate_box">
        <div class="item_box">
          <div class="operate_item" v-if="!Boolean(wdata)">
            <label>仓库：</label>
            <el-select
              filterable
              v-model="warehouseId"
              placeholder="请选择仓库"
              @change="getAllProduct">
              <el-option
                v-for="(item,index) in warehouseOption"
                :key="index"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="operate_item" v-if="warehouseId">
            <label>商品：</label>
            <el-select filterable placeholder="请选择商品" v-model="productId" >
              <el-option
                :label="item.productName"
                :value="item.productId"
                v-for="(item,index) in productList"  :key="index">
              </el-option>
            </el-select>
          </div>
          <div class="operate_item">
            <label>上下架：</label>
            <el-select filterable v-model="enable" >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item,index) in enableList" :key="index">
              </el-option>
            </el-select>
          </div>
          <div class="operate_item">
            <span @click="getTableInfo(1)" class="operate_btn search_btn">查询</span>
            <span @click="resetTable" class="operate_btn reset_btn">重置</span>
          </div>
        </div>
        <div class="btn_box" v-if="btn&&btn.add">
          <span @click="openPopup('')" class="operate_btn search_btn" >新增</span>
          </div>
      </div>
      <!-- 表格 -->
      <div class="flex_box">
        <div class="detail_part" :class="{'left_box':isLog}">
          <div class="table_box">
            <el-table
              :data="tableInfo"
              :header-cell-style="tableHeader"
              border
              :max-height="tableHeight"
              ref="multipleTable"
              style="width: 100%;"
              tooltip-effect="dark"
              @sort-change="getChange"
              v-loading="loading">
              <el-table-column
                label="ID"
                prop="id"
                width="80">
              </el-table-column>
              <el-table-column
                label="更新时间"
                prop="1"
                sortable="custom"
                width="160">
                <template slot-scope="scope">
                  <p style="text-align: left">{{ formatTime(scope.row.modifyTime) }}</p>
                </template>
              </el-table-column>
              <el-table-column
                label="仓库名称">
                <template slot-scope="scope">
                  <span>{{ scope.row.warehouseName ? scope.row.warehouseName : '——' }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="商品名称">
                <template slot-scope="scope">
                  <span>{{ scope.row.productName ? scope.row.productName : '——' }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="商品图片">
                <template slot-scope="scope">
                  <img :src="scope.row.productPhoto" alt="tzs" class="icon" v-if="scope.row.productPhoto">
                  <p v-else>——</p>
                </template>
              </el-table-column>
              <el-table-column
                label="商品数量">
                <template slot-scope="scope">
                  <span>{{ scope.row.numbers ? scope.row.numbers : 0 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="空桶数量">
                <template slot-scope="scope">
                  <span>{{ scope.row.returnNumber ? scope.row.returnNumber : 0 }}</span>
                </template>
              </el-table-column>

              <el-table-column
                width="100"
                label="状态" v-if="!btn.updateEnable">
                <template slot-scope="scope">
                  <div :style="'color:'+(scope.row.enable===1?'#67c430':'#e60000')">
                    {{scope.row.enable===1?'上架':'下架'}}
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                label="状态"
                prop="2"
                sortable="custom"
                width="100" v-if="btn && btn.updateEnable">
                <template slot-scope="scope">
                  <div>
                    <el-switch
                      :active-value="1"
                      :inactive-value="2"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      @change="modify(scope.row,scope.$index)"
                      v-model="scope.row.enable">
                    </el-switch>
                    <span class="normal" v-if="scope.row.enable===1">上架</span>
                    <span class="unusual" v-else>下架</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                v-if="btn&&(btn.update||btn.delete || btn.log)"
                width="150">
                <template slot-scope="scope">
                  <div class="table_btn">
<!--                    <span @click="openPopup(scope.row.id)" class="change_info" v-if="btn.update">编辑</span>-->
                    <span @click="deleteItem(scope.row)" class="change_info delete_btn" v-if="btn.delete">删除</span>
                    <span @click="openLog(scope.row)" class="change_info" v-if="btn.log">日志</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="record_page">
            <span class="page_count">共<i>{{ totals }}</i>条</span>
            <el-pagination
              :current-page="currentPage"
              :page-size="pageSize"
              :page-sizes="[10, 20, 30, 40]"
              :total="totals"
              @current-change="getTableInfo"
              @size-change="sizeChange"
              background
              layout="prev, pager, next, sizes,jumper">
            </el-pagination>
          </div>
        </div>
        <div class="right_box" v-if="isLog">
          <p class="page_title" >{{productName}}产品日志 <i class="detail_close" @click="closeDetail"></i></p>
          <log :productId="menuId" :warehouseId="wareseId" ></log>
        </div>
      </div>

    </div>
    <edit :mid="menuId" :wdata="wdata" @listenToChild="listenToEdit" v-if="isPop"></edit>
  </div>
</template>

<script>
import edit from "./edit";
import log from "./log/index"
import commons from "@/utils/common";
import {getBtn} from "@/utils/btnAuth";
import {delProduct, getProduct, getProductTotal, ProductEnable} from "@/api/basic/warehouse/product";
import {judgeRole} from "@/utils/warehouseAuth";

export default {
  name: 'commodity',
  props: ['wdata'],
  components: {
    edit,
    log
  },
  data() {
    return {
      productId: '',
      warehouseId: this.wdata ? this.wdata.id : '',
      warehouseOption: [],
      enable: '',
      enableList: [
        {id: '', name: '全部'},
        {id: 1, name: '上架'},
        {id: 2, name: '下架'},
      ],
      warehouseList: [],
      productList: [],
      currentPage: 1,
      pageSize: 10,
      totals: 0,
      loading: false,
      tableInfo: [],
      productName:'',
      menuId: '',
      wareseId:'',
      isPop: false,
      btn: {},
      isLog: false,
      tableHeight:'auto',
      roleHouse:{},
      sortNumber:''
    }
  },
  mounted() {
    if (this.wdata) {
      this.getAllProduct();
      this.tableHeight = 500;
    } else {
      this.roleHouse = judgeRole();
      this.warehouseOption = this.roleHouse.list;
      this.warehouseId = this.roleHouse.id;
      if (this.warehouseId){
        this.getAllProduct()
      }
    }
    if(this.$route.query.id) {
      this.warehouseId =  parseInt(this.$route.query.id);
      this.getAllProduct()
    }
    this.btn = getBtn();
    if (this.btn.query) {
      this.getTableInfo(1);
    }
  },
  methods: {
    //监听列表排序
    getChange(val) {
      let sort = parseInt(val.prop)
      if(this.sortNumber < 0) {
        this.sortNumber = sort;
      }else {
        this.sortNumber = -sort;
      }
      //重新获取列表
      this.getTableInfo(1);
    },

    getTableInfo(page) {
      let that = this;
      that.loading = true;
      that.currentPage = page;
      let queryParams = {
        productId: that.productId,
        warehouseId: that.warehouseId,
        enable: that.enable,
        limit: that.pageSize,
        page: page,
        sort:that.sortNumber
      };
      getProduct(queryParams).then(res => {
        that.tableInfo = res.list ? res.list : [];
        that.totals = res.count;
        that.loading = false;
      }).catch((e) => {
        that.tableInfo = [];
        that.totals = 0;
        that.loading = false;
      });
    },

    resetTable() {
      this.productId = '';
      this.enable = '';
      this.pageSize = 10;
      this.sortNumber='';
      this.warehouseId = this.roleHouse.id ? this.warehouseId : '';
      this.getTableInfo(1)
    },
    //关闭日志
    closeDetail() {
      this.isLog = false;
    },

    //商品列表
    getAllProduct() {
      let that = this;
      let queryParams = {
        warehouseId: that.warehouseId,
      };
      getProductTotal(queryParams).then(res => {
        that.productList = res ? res : [];
      }).catch((e) => {
        that.productList = [];
      })
    },

    // 移除
    deleteItem(obj) {
      let that = this;
      that.$confirm('确定删除「' + obj.productName + '」商品信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delProduct(obj.id).then(res => {
          that.getTableInfo(that.currentPage);
          that.$message.success('删除成功！');
        }).catch((e) => {
        });
      }).catch(() => {
      });
    },

    //修改状态
    modify(obj,index) {
      let that = this;
      that.$confirm('确定修改「' + obj.productName + '」商品状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let queryParams = {
          id: obj.id,
          enable: obj.enable
        };
        ProductEnable(queryParams).then(res => {
          that.getTableInfo(that.currentPage);
          that.$message.success('修改成功！');
        }).catch((e) => {
        });
      }).catch(() => {
        this.isPop = false;
        this.getTableInfo(this.currentPage)
      });
    },


    // 打开弹窗
    openPopup(id) {
      this.isPop = true;
      this.menuId = id;
    },
    //日志
    openLog(obj) {
      this.isLog = true;
      this.menuId = obj.productId;
      this.wareseId = obj.warehouseId
      this.productName = obj.productName
    },

    listenToEdit(e) {
      this.isPop = false;
      if (e.refresh) {
        this.getTableInfo(this.currentPage)
      }
    },

    formatTime(time) {
      return commons.formatTime(time)
    },

    sizeChange(val) {
      this.pageSize = val;
      this.getTableInfo(1)
    },

    // 设置table标题居中
    tableHeader({row, column, rowIndex, columnIndex}) {
      return 'background:#F0F2F5;color:#111;padding:10px 0;font-size:14px;font-weight:600;'
    },
  }
}
</script>


<style scoped>
.detail_part {
  width: 100%;
}

.flex_box {
  display: flex;
}

.detail_box {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  /*height: 600px;*/
  min-height: 600px;
  /*padding: 0;*/
}

.left_box {
  width: 60%;
}

.right_box {
  width: 40%;
}
.page_title {
  font-weight: 600;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 18px;
  position: relative;
}

</style>
